<template>
	<view v-if="show" class="dz-loading" :class="mode == 'circle' ? 'dz-loading-circle' : 'dz-loading-flower'" :style="[cricleStyle]"> </view>
</template>

<script lang="ts" setup>
/**
 * loading 加载动画
 * @description 警此组件为一个小动画，目前用在loadmore加载更多和switch开关等组件的正在加载状态场景。
 * @property {String} mode 模式选择，（默认circle）
 * @property {String} color 动画活动区域的颜色，只对 mode = flower 模式有效（默认#c7c7c7）
 * @property {String Number} size 加载图标的大小，单位rpx（默认34）
 * @property {Boolean} show 是否显示动画（默认true）
 * @example <dz-loading mode="circle"></dz-loading>
 */
import { computed } from 'vue';
import type { CSSProperties } from 'vue';

const props = defineProps({
	// 动画的类型
	mode: {
		type: String,
		default: 'circle',
	},
	// 动画的颜色
	color: {
		type: String,
		default: '#c7c7c7',
	},
	// 加载图标的大小，单位rpx
	size: {
		type: [String, Number],
		default: '34',
	},
	// 是否显示动画
	show: {
		type: Boolean,
		default: true,
	},
	borderSize: {
		type: [String, Number],
		default: '4',
	},
	borderColor: {
		type: String,
		default: '#e4e4e4',
	},
});

const cricleStyle = computed((): CSSProperties => {
	let style = {};
	style.width = props.size + 'rpx';
	style.height = props.size + 'rpx';
	if (props.mode == 'circle') {
		style.border = `${props.borderSize}rpx solid`;
		style.borderColor = `${props.borderColor} ${props.borderColor} ${props.borderColor} ${props.color ? props.color : '#c7c7c7'}`;
	}
	return style;
});
</script>

<style lang="scss" scoped>
.dz-loading-circle {
	/* #ifndef APP-NVUE */
	display: inline-flex;
	/* #endif */
	vertical-align: middle;
	width: 28rpx;
	height: 28rpx;
	background: 0 0;
	border-radius: 50%;
	border: 2px solid;
	border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
	animation: dz-circle 1s linear infinite;
}

.dz-loading-flower {
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	-webkit-animation: a 1s steps(12) infinite;
	animation: dz-flower 1s steps(12) infinite;
	background: transparent
		url()
		no-repeat;
	background-size: 100%;
}

@keyframes dz-flower {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}

@keyframes dz-circle {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}
</style>
